<template>
  <div class="statusText" :style="styleStatus">{{ statusText }}</div>
</template>

<script lang="ts" setup>
const props = defineProps<{
  statusText: string;
}>();

const styleStatus = computed(() => {
  return {
    ['成功']: {
      border: '1px solid#00B42A',
      background: 'rgba(0, 180, 42, 0.102)',
      color: '#00b42a',
    },
    ['失败']: {
      border: '1px solid#F53F3F',
      background: 'rgba(245, 63, 63, 0.102)',
      color: '#F53F3F',
    },
    ['异常']: {
      border: '1px solid #FF7D00',
      background: 'rgba(255, 125, 0, 0.102)',
      color: '#FF7D00',
    },
    ['进行中']: {
      border: '1px solid#3491FA',
      background: ' rgba(52, 145, 250, 0.102)',
      color: '#3491FA',
    },
  }[props.statusText];
});
</script>
<style lang="less">
.statusText {
  // display: inline-block;
  margin:0 auto;
  width: 58px;
  height: 22px;
  line-height: 22px;
  border-radius: 2px;
  opacity: 1;

  box-sizing: border-box;
  font-family: 思源黑体;
  font-size: 14px;
  font-weight: normal;
  text-align: center;
  letter-spacing: 0em;
}
</style>
